<!--新书板块-->
<template>
  <div class="books_new">
    <h3>新书上市</h3>
    <ul>
      <li v-for="book in books" :key="book.id">
        <router-link :to="{ name: 'hot', params: { id: book.id } }">
          <img :src="book.imgUrl" alt="" />
          <p style="margin-bottom:20px">{{ book.name }}</p>
          <p>
            {{ currency(factPrice(book.price, book.discount)) }}
            <del>{{ book.price }}</del>
          </p>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "BooksNew",
  data() {
    return {
      books: [],
    };
  },
  created() {
    this.axios
      .get("/booksNews")
      .then((res) => {
        this.books = res.data;
      })
      .catch((err) => {
        console.log(err);
      });
    this.getData();
  },
  inject: ["factPrice", "currency"],
  methods: {
    async getData() {
      const res = await this.axios.get("/booksNews");
      this.books = res.data;
    },
  },
};
</script>

<style>
.books_new {
  width: 100%;
  text-align: center;
}
.books_new h3 {
  font-weight: 700;
  font-size: 20px;
  padding: 10px 0;
}

.books_new ul {
  overflow: hidden;
}

.books_new li {
  float: left;
  width: 20%;
  height: 100%;
}

.books_new li a {
  display: block;
  width: 100%;
  height: 100%;
}

.books_new li a img {
  display: block;
  width: 50%;
  margin: 0 auto;
  height: auto;
}

.books_new li del {
  color: grey;
}
</style>
